<template>
  <view class="container">
    <view class="main">
      <view class="addressInfo" @click="toAddressList">
        <image class="location-icon" src="/static/images/location.png" mode=""></image>
        <view class="block" v-if="orderInfo.addressInfo">
          <text class="label">{{orderInfo.addressInfo.real_name}} {{orderInfo.addressInfo.phone}}</text>
          <text
            class="value">{{orderInfo.addressInfo.province}}/{{orderInfo.addressInfo.city}}/{{orderInfo.addressInfo.district}}</text>
          <text class="value">{{orderInfo.addressInfo.detail}}</text>
        </view>
        <view class="block" v-else>
          <text class="label">请选择地址</text>
        </view>
        <image class="arrow-icon" src="/static/images/arrow.png" mode=""></image>
      </view>
      <view class="goodsInfo">
        <view class="goodsInfo-title">
          商品清单
        </view>
        <view class="goodsInfo-body" v-for="(item, index) in orderInfo.cartInfo" :key="index">
          <image class="goodsImg" :src="item.productInfo.image" mode="aspectFill"></image>
          <view class="block">
            <view class="goodsName">
              {{item.productInfo.store_name}}
            </view>
            <view class="sukName" style="font-weight: 400;font-size: 28rpx;color: #999999;">
              规格值：{{item.productInfo.attrInfo.suk}}
            </view>
            <view class="foot">
              <view class="foot-fl">
                <text class="price">￥{{item.productInfo.price}}</text>
                <!-- <text class="discount">省1123元</text> -->
              </view>
              <view class="foot-fr">
                x{{item.cart_num}}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="desc" style="margin-top: 20rpx;">
        温馨提示：兑换权益要求，消费大健康产品占比总
      </view>
      <view class="desc">
        订单金额70%以上。
      </view>
    </view>
    <view style="width: 100%;height: 150rpx;"></view>
    <view class="footer">
      <view class="footer-fl">
        <view class="linner">
          <view class="price">合计:￥{{totalPrice}}</view>
          <view class="label">共{{orderInfo.cartInfo.length}}件</view>
        </view>
      </view>
      <view class="footer-fr" @click="toPay">
        提交订单
      </view>
    </view>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        currentIndex: 0,
        orderInfo: {
          addressInfo: null,
          cartInfo: [
          ]
        },
        params: {
          cartId: "",
          new: null
        },
        discountAmount: "0.00",
        salesAmount: "0.00",
        totalPrice: "12.00",
        formLine: {
          key: "",
          addressId: ""
        },
        payParams: {
          uni: "", //订单编号
          paytype: "" //支付方式
        }
      }
    },
    onLoad(option) {
      const {
        id,
        isnew
      } = option;
      this.params.cartId = id;
      this.params.new = isnew;
      this.getOrderInfo();
    },
    onShow() {
      let self = this;
      uni.$on("getAddress", data => {
        console.log("接收地址", data);
        self.formLine.addressId = data.id;
        self.orderInfo.addressInfo = data;
        // self.$nextTick(() => {
        //   self.getAmount();
        // })
      })
    },
    methods: {
      toAddressList() {
        uni.navigateTo({
          url: "/pages/mine/addressList?isPage=" + 'order'
        })
      },
      toPay() {
        if (this.formLine.addressId) {
          reqApi.createOrder(this.formLine).then(res=>{
            uni.navigateTo({
              url: `/pages/home/cashier?id=${res.data.result.orderId}`
            })
          })
        } else {
          uni.showToast({
            title: "请选择收货地址",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
        }

      },
      // 选择支付方式
      confirmPayWay(e) {
        let self = this;
        const {
          name,
          value
        } = e.value[0];
        console.log('name', name);
        console.log('value', value);
        self.formLine.payType = value;
        self.payParams.paytype = value;
        reqApi.createOrder(self.formLine).then(res => {
          console.log("创建订单", res);
          self.payParams.uni = res.data.result.orderId;
          self.toPayOder();
        })
      },
      toPayOder() {
        let self = this;
        console.log("formLine", self.payParams);
        uni.login({
          provider: 'weixin',
          onlyAuthorize: true,
          success: function(loginRes) {
            console.log('微信授权信息：', loginRes)
            self.payFn(loginRes.code);
          },
          fail(error) {
            console.log(error)
            uni.showToast({
              title: "登录失败",
              icon: 'none',
              mask: true,
              duration: 1500,
            })
          }
        });
      },
      payFn(code) {
        this.payParams.code = code;
        reqApi.payOrder(this.payParams).then(res => {
          let jsConfig = res.data.result.jsConfig;
          uni.requestPayment({
            provider: 'wxpay',
            appid: jsConfig.appId,
            timeStamp: jsConfig.timestamp,
            package: jsConfig.package,
            paySign: jsConfig.paySign,
            signType: jsConfig.signType,
            nonceStr: jsConfig.nonceStr,
            success: (e) => {
              uni.showToast({
                title: "支付成功",
                duration: 1500,
                icon: 'none',
                mask: true
              })
              setTimeout(() => {
                uni.switchTab({
                  url: "/pages/home/index"
                })
              }, 1500)
            },
            fail: (e) => {
              console.log("err", e);
              uni.showToast({
                title: "支付失败",
                duration: 1500,
                icon: 'none',
                mask: true
              })
            }
          });
        })
      },
      getOrderInfo() {
        reqApi.orderConfirm(this.params).then(res => {
          console.log("订单确认信息", res);
          if (res.data.addressInfo.length == 0) {
            res.data.addressInfo = null;
          }
          console.log("addressInfo", res.data.addressInfo);
          this.orderInfo = res.data;
          this.totalPrice = res.data.priceGroup.totalPrice;
          this.formLine.key = res.data.orderKey;
          if (res.data.addressInfo) {
            this.formLine.addressId = res.data.addressInfo.id;
          }
          console.log("计算总价-key", this.formLine);
        })
      },
      setIndex(index) {
        this.currentIndex = index;
      },
      open() {
        this.$refs.popup.open();
      },
      handleNotUse() {
        this.$refs.popup.close();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .saveBtn {
    padding: 0 30rpx;
    box-sizing: border-box;
    margin-top: 90rpx;

    .saveBtn-item {
      width: 630rpx;
      height: 88rpx;
      background: linear-gradient(270deg, #4AA578 0%, #3DA497 100%);
      border-radius: 104rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 88rpx;
    }
  }

  .dialog {
    padding: 30rpx;
    box-sizing: border-box;

    .dialog-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      text-align: center;
    }

    .notUse {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #3DA497;
      text-align: right;
      text-decoration: underline;
      margin-bottom: 20rpx;
    }

  }

  .desc {
    text-align: center;
    font-weight: 400;
    font-size: 24rpx;
    color: #F86F03;
  }

  .container {
    .main {
      padding: 30rpx;
      box-sizing: border-box;

      .addressInfo {
        width: 100%;
        padding: 40rpx 30rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .location-icon {
          width: 48rpx;
          height: 48rpx;
        }

        .block {
          flex: 1;
          display: flex;
          flex-direction: column;
          padding: 0 20rpx;
          box-sizing: border-box;

          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
          }

          .value {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #999999;
          }
        }

        .arrow-icon {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .goodsInfo {
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        background: #fff;
        margin-top: 30rpx;

        .goodsInfo-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }

        .goodsInfo-body {
          margin-top: 30rpx;
          display: flex;

          .goodsImg {
            width: 160rpx;
            height: 160rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
          }

          .block {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .goodsName {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #333333;
            }

            .foot {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .foot-fl {
                display: flex;
                flex: 1;
                align-items: center;

                .price {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: bold;
                  font-size: 32rpx;
                  color: #EA2222;
                }

                .discount {
                  font-family: PingFang SC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #EA7222;
                  margin-left: 10rpx;
                }
              }

              .foot-fr {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #AAAAAA;
              }
            }
          }
        }
      }

      .couponInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 30rpx;
        margin-top: 30rpx;

        .couponInfo-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }

        .couponInfo-value {
          flex: 1;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #EA2222;
          text-align: right;
        }

        .couponInfo-arrow {
          width: 40rpx;
          height: 40rpx;
        }
      }

      .remake {
        padding: 30rpx 40rpx;
        box-sizing: border-box;
        background: #fff;
        margin-top: 30rpx;

        .remake-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .ipt {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #222;
          background: #F7F8FA;
          border-radius: 20rpx;
          width: 100%;
          margin-top: 20rpx;
          padding: 30rpx;
          box-sizing: border-box;
        }

        .styles {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #AAAAAA;
        }
      }
    }

    .footer {
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      background: #fff;
      position: fixed;
      width: 100%;
      bottom: 0;

      .footer-fl {
        flex: 1;

        .linner {
          display: flex;
          // align-items: flex-start;
          flex-direction: column;

          // justify-content: center;
          .label {
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;
          }

          .price {
            font-weight: 500;
            font-size: 32rpx;
            color: #EE1B1B;
          }
        }


        .discount {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #EA7222;
        }
      }

      .footer-fr {
        width: 300rpx;
        height: 88rpx;
        background: #F86F03;
        border-radius: 60rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }
</style>